<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../../d3.js"></script>
<script src="topojson.v1.min.js"></script>
<script>
var width = 960,
    height = 960;
    
var radius = 240;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
var projection = d3.geo.orthographic()
	.scale(240)
	.clipAngle(90);

var div = d3.select("body").append("div");

var path = d3.geo.path().projection(projection);

d3.json("world-50m.json", function(error, world) {
	var feature = svg.append("path")
				.datum(topojson.feature(world, world.objects.land))
				.attr("d", path)
				.attr("fill","steelblue");
	
	var t = 0;
	d3.timer(function() {
		var s = Math.round(Date.now() / 100);
		if (s != t) {
			t = s;
			var y = s%90,
				x = 0;
			div.html("投影中心的位置：[" + x + ","+y+"]");
			projection.center([ x, y ]);
			feature.attr("d", path);
		}
	});

});
</script>

